<template>
  <!-- 1.第一个问答区 单选-->
  <div class="card-right">
    <div>
      <span class="shu">|</span>
      <span>{{ Info.topic.title }}</span>
    </div>
    <a-radio-group v-model="value" @change="onChange">
      <div v-for="(item, i) in Info.answer" :key="i">
        <a-radio
          :style="radioStyle"
          :value="item.AnswerQid"
        >
          {{ item.AnswerInfo }}
        </a-radio>
        <a-form-item >
          <a-textarea
            v-model="textValue"
            :auto-size="{ minRows: 3, maxRows: 10 }"
            :placeholder="$t('user.verification-code.required111566110577274')"
            :rows="3"
            style="width: 615px"
            @blur="textChange"   @input="updateWordCount"
            v-if="value === item.AnswerQid && item.AnswerRequired == 1" 
            :maxlength=" 3000 " 
          /> 
          <i v-if="value === item.AnswerQid && item.AnswerRequired == 1" style="position: absolute; top: -5px; right: 24px;font-size: 12px; color: #cbcbcb; z-index: 10" >{{ wordCount }} / 3000</i>
        </a-form-item>
      </div>
    </a-radio-group>
    <!-- zhong2500   ying5000 -->
  </div>
</template>
<script>
export default {
  props: {
    Info: {
      type: Object,
    },
    Answer: {
      type: Object,
    },
    DpiaModelId: {
      type: Number,
    },
  },
  data() {
    return {
      value: null,
      radioStyle: {
        height: "30px",
        lineHeight: "40px",
        margin: "5px",
        fontSize: "15.5px",
        whiteSpace: "normal",
        wordWrap: "break-word",
      },
      textValue: "",
      wordCount: 0,
      // totalCount:"",
    };
  },
  created() {
    this.init();
  },
  watch: {
    Info(e) {
      if (Object.keys(e).indexOf("lastAnswer") != -1) {
        if (e.lastAnswer.type == 1) {
          this.value = parseInt(e.lastAnswer.answer);
        }
      }
    },
  },
  mounted() {
    this.wordCount = this.textValue.length;
    // console.log('猜猜我是什么',this.DpiaModelId);
    // if (this.DpiaModelId == 96) {
    //   this.totalCount = "2500";
    // }else if (this.DpiaModelId == 106) {
    //   this.totalCount = "5000";
    // }
  },
  methods: {
    init() {
      this.value = null;
      if (this.Info != {}) {
        if (this.Info.lastAnswer.type == 1) {
          this.value = parseInt(this.Info.lastAnswer.answer);
        }
        this.textValue = this.Answer.required;
      }
    },
    // 单选框
    onChange(e) {
      console.log(e,'e');
      var topicId = "";
      var AnswerQid = "";
      let answerName = "";
      this.textValue = ""
      // 获取答案对应的题目ID
      for (var i = 0; i < this.Info.answer.length; i++) {
        if (this.Info.answer[i].AnswerQid == e.target.value) {
          (topicId = this.Info.answer[i].TopicTid),
            (answerName = this.Info.answer[i].AnswerInfo);
        }
      }
      this.value = e.target.value;
      // 章节、题目、答案
      setTimeout(() => {
        this.$emit("result", {
          title: this.Info.topic.title,
          answerName: answerName,
          chapter: this.Info.topic.chapter,
          topic: topicId,
          // AnswerQid: AnswerQid,
          AnswerQid: e.target.value,
          type: 1,
          textValue: this.textValue,
        });
      });
      
    },
    textChange() {
      this.$emit("result", {
        topic: this.Info.answer[0].TopicTid,
        chapter: this.Info.topic.chapter,
        AnswerQid: this.value,
        textValue: this.textValue,
        type: 1,
      });
      // if (this.textValue === '') {
      //   this.$message.error(
      //     this.$t("user.verification-code.required111566110577274")
      //   );
      // }
    },
    updateWordCount() {
      this.wordCount = this.textValue.length;
    },

  },
};
</script>
<style lang="less" scoped>
.card-right {
  width: 80%;
  margin: 0 auto;
  text-align: justify;
  margin: 30px 30px 30px 60px;
}

.shu {
  /*矩形备份*/
  margin-right: 5px;
  left: 838px;
  top: 287px;
  width: 6px;
  height: 12px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}
.ant-radio-group {
  display: block;
  label {
    display: block;
  }
}
.ant-radio-wrapper {
  height: auto !important;
  line-height: 24px !important;
}

.ant-from-item-control{
  margin-left:50px;
}

.ant-form-item {
  margin-bottom: 0px !important;
}
.requiredIcon {
  &::after {
      content: '*';
      color: #f5222d;
      padding-left: 2px;
    }
}
</style>